<template>
  <div>
    <h1>音乐信息</h1>
    <ul>
      <li v-for="music in data.musicList" :key="music.id" @click="go(music.id)">{{music.name}}:{{music.auth }}</li>
    </ul>
  </div>
</template>

<script lang='ts' setup>
import {reactive} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
const go=(id:number)=>{
  //router.push(`/musicDetail?id=${id}`)
  router.push({
    path:'/musicDetail',
    query:{
      id
    }
  })
}
const data=reactive({
  musicList:[
    {
      id:1,
      name:'全日爱',
      auth:'黎明',
      num:100
    },
    {
      id:2,
      name:'外面的世界',
      auth:'莫文蔚',
      num:200
    },
    {
      id:3,
      name:'吻别',
      auth:'张学友',
      num:240
    }
  ]
})
</script>

<style lang='scss' scoped>
</style>